import { getToken, setToken, removeToken, setTimeStamp } from "@/utils/auth";
import { login, getUserInfo, getUserDetailById, logout } from "@/api/user";
import { resetRouter } from "@/router";
// 状态
//  初始化的时候从缓存中读取状态  并复制到初始化的状态上
const state = {
  token: getToken(), // 设置 token 为共享状态  token 持久化 => 放到缓存中
  userInfo: {} // 定义一个空的对象  不是 null 因为后面要开发 userInfo的属性给别人用  userInfo.name
};

// 修改状态
const mutations = {
  // 设置 token
  setToken(state, token) {
    state.token = token; //  设置 token  只是修改 state 中的数据
    // vuex 变化  =>  缓存数据
    setToken(token);
  },

  //  删除缓存
  removeToken(state) {
    state.token = null; // 删除 vuex 中的 token
    removeToken(); //  先清除 vuex 再清除缓存中的 token  vuex 和 缓存数据同步
  },

  // 设置用户信息
  setUserInfo(state, userInfo) {
    state.userInfo = { ...userInfo }; // 用浅拷贝的方式去赋值对象  因为这样数据更新之后，才会触发组件更新
  },
  // 删除用户信息
  removeUserInfo(state) {
    state.userInfo = {};
  }
};

// 执行异步
const actions = {
  // context 指向的是 $store
  //  login  定义的方法名叫  login
  async login(context, data) {
    // login  来自上面导入的 api 请求里面的 login
    //  经过响应拦截器的处理之后，这里的 result 实际上就是 token
    const result = await login(data); // 实际上就是一个 promise  result 就是执行的结果
    console.log(result);
    // axios 默认给数据加了一层 data
    // if (result.data.success) {
    // // 表示登录接口调用成功  也就意味着你的用户名和密码是正确的
    //  // 现在有用户的 token
    //  // action 修改 state 必须通过 mutations
    //   context.commit("setToken", result.data.data);
    // }
    // context.commit("setToken", result.data.data);
    context.commit("setToken", result);

    // 拿到 token 说明登录成功
    // 写入时间戳 将当前的最新时间写入缓存
    setTimeStamp();
  },

  // login(context, data) {
  //   return new Promise(function(resolve) {
  //     login(data).then(result => {
  //       if (result.data.success) {
  //         context.commit("setToken", result.data.data); // 提交 mutations  设置 token
  //         resolve(); // 表示执行成功了
  //       }
  //     });
  //   });
  // }

  //  封装获取用户资料
  async getUserInfo(context) {
    const result = await getUserInfo(); // 获取返回值 result 就是用户的基本资料
    const baseInfo = await getUserDetailById(result.userId); // 为了获取头像  必须要写到 获取用户资料的下面 因为获取头像要用到用户的 id
    const baseResult = { ...result, ...baseInfo }; //  将两个接口结果合并
    context.commit("setUserInfo", baseResult); // 将整个的个人信息设置到用户的 vuex 数据中
    console.log(baseResult, "baseResult");
    return baseResult;
  },

  // 退出登录
  logout(context) {
    // 删除 token
    context.commit("removeToken"); // 不仅删除了 vuex 中的还删除了缓存中的
    // 删除用户资料
    context.commit("removeUserInfo"); // 删除用户信息
    // 重置路由
    resetRouter();
    //  还有一步 vuex 中的数据还在
    //  要清空 permission 模块下 state 数据
    //  vuex 中 user是子模块 permission 也是子模块
    //  子模块调用子模块的 action 默认情况下 子模块的 context 是子模块的 存在作用域
    //  可以通过父模块，调用子模块的 action
    context.commit("permission/setRoutes", [], { root: true });
    //  子模块调用子模块的 action 可以将 commit 的第三个参数设置成 { root:true} 就表示点前的 context 不是子模块了 而是父模块
  }
};

export default {
  // 开启命名空间
  namespaced: true,
  state,
  mutations,
  actions
};
